<template>

  <div v-if="props.isMemberUse" style="position: relative;border:0.5px solid #784c2c;border-radius:5px;width: 380px">
    <ElInput
        v-bind="inputProps"
        v-model="localValue"
        style="border:none"
        type="number"
        :max="props.user_max"
        @blur="blurInput"
    />

  </div>
  <div v-else style="width: 380px">
    <ElInput
        v-bind="inputProps"
        v-model="localValue"
        type="number"
        :max="props.user_max"
        @blur="blurInput"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, withDefaults, defineProps, defineEmits } from 'vue';
import { InputProps } from 'element-plus';

interface Props extends Partial<InputProps> {
  isMemberUse: boolean;
  user_max?: number;
}

const props = withDefaults(defineProps<Props>(), {
  isMemberUse: false,
  showWordLimit: true,
  user_max: undefined,
});

const emit = defineEmits<{
  (event: 'update:modelValue', value: number): void;
}>();



const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

// 使用 ref 来创建一个响应式变量来存储输入值
const localValue = ref(Number(props.modelValue) || '');

// 计算属性用于处理 v-model 的更新，但在这个例子中我们不再需要它，因为我们直接操作 localValue
// const value = computed({
// get() {
// return props.modelValue;
// },
// set(newValue) {
// emit('update:modelValue', newValue);
// },
// });

const blurInput = () => {
// 检查 localValue 的值，并在大于 100 时重置为 100


  if (localValue.value > props.user_max) {
    localValue.value = props.user_max;
  // 触发更新事件，将新值发送回父组件（如果需要的话）
    emit('update:modelValue', localValue.value);
  }else{
    emit('update:modelValue', localValue.value);
  }
// 注意：如果父组件依赖于这个值来执行其他操作，你可能需要在这里触发其他事件或执行其他逻辑。
};

// 创建一个计算属性来返回除了 v-model 之外的 input 属性
const inputProps = computed(() => {
  const { modelValue, ...restProps } = props;
  return restProps;
});

// 如果你想在组件销毁时做一些清理工作，你可以使用 onUnmounted 钩子（在这个例子中不是必需的）
// import { onUnmounted } from 'vue';
// onUnmounted(() => {
// // 清理逻辑
// });

</script>

<style lang="scss" scoped>
.pos {
  position: absolute;
  right: -2px;
  top: -5px;
  width: 28px;
  height: 17px;
}
</style>
